import CommonDrawer from '@/components/CommonDrawer';
import CommonTable from '@/components/CommonTable';
import { CHARGE_GUN_STATE_MAP, CHARGE_TYPE_MAP } from '@/constants/enums';
import request from '@/utils/request';
import { useAsyncEffect, useRequest } from 'ahooks';
import { Descriptions } from 'antd';

const Detail = (props) => {
  const { open, record, onCancel, onOk } = props;

  const { data: detailData, runAsync: runAsyncDetail } = useRequest(
    async (params) => {
      const res = await request({
        url: '/datas/charge/device/detail',
        method: 'GET',
        params,
      });
      return res;
    },
    { manual: true },
  );

  useAsyncEffect(() => {
    if (open && record) {
      runAsyncDetail({
        chargeDeviceId: record.chargeDeviceId,
      });
    }
  }, [open, record]);

  // 充电站、设备编号、设备名称、充电类型、功率（kw）、充电枪数、系统时间、备注
  const items = [
    {
      key: 'chargeStationName',
      label: '充电站',
      children: detailData?.chargeStationName,
    },
    {
      key: 'chargeDeviceCode',
      label: '设备编号',
      children: detailData?.chargeDeviceCode || '-',
    },
    {
      key: 'chargeDeviceName',
      label: '设备名称',
      children: detailData?.chargeDeviceName || '-',
    },
    {
      key: 'chargeType',
      label: '充电类型',
      children: CHARGE_TYPE_MAP[detailData?.chargeType] || '-',
    },
    {
      key: 'powers',
      label: '功率（kw）',
      children: detailData?.powers || '-',
    },
    {
      key: 'total',
      label: '充电枪数',
      children: detailData?.total || '-',
    },
    {
      key: 'time',
      label: '系统时间',
      children: detailData?.time || '-',
    },
    {
      key: 'remark',
      label: '备注',
      children: detailData?.remark || '-',
    },
  ];
  return (
    <CommonDrawer
      title="详情"
      open={open}
      onClose={onCancel}
      width={1200}
      destroyOnHidden
      okBtnProps={{ style: { display: 'none' } }}
    >
      <div
        style={{
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
        }}
      >
        <h3>充电设备信息</h3>
        <Descriptions bordered items={items} />
        <h3>充电枪列表</h3>
        <div style={{ flex: 1, minHeight: 0 }}>
          <CommonTable
            bordered
            rowKey="chargeGunId"
            columns={[
              {
                title: '序号',
                fixed: 'left',
                width: 65,
                render: (text, record, index) => index + 1,
              },
              {
                title: '充电站',
                dataIndex: 'chargeStationName',
                fixed: 'left',
                width: 150,
              },
              {
                title: '充电设备',
                dataIndex: 'chargeDeviceName',
                fixed: 'left',
                width: 150,
              },
              {
                title: '充电枪编号',
                dataIndex: 'chargeGunCode',
                fixed: 'left',
                width: 150,
              },
              {
                title: '充电枪名称',
                dataIndex: 'chargeGunName',
                fixed: 'left',
                width: 150,
              },
              {
                title: '状态',
                dataIndex: 'state',
                width: 100,
                render: (text) => CHARGE_GUN_STATE_MAP[text] || '',
              },
            ]}
            dataSource={detailData?.guns}
            pagination={false}
          />
        </div>
      </div>
    </CommonDrawer>
  );
};

export default Detail;
